<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import {
  testingConnection,
  checkEnvironment,
  getMachineInfo,
  deleteTestingMachine,
  machineIsEnable,
  addTestingMachine,
  startJmeter,
  checkJmeterIsOpen
} from "@/api/file";
import { ElMessage, ElTable } from "element-plus";

defineOptions({
  name: "resource"
});

type selection = {
  name?: string;
  path?: string;
  lastModified?: string;
  size?: string;
};
const tableData = ref([]);
const loading = ref(false);
const dialogLoading = ref(false);
const dialogIsDisabled = ref(false);
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<selection[]>([]);
const dialogFormVisible = ref(false);
const searchIp = ref('');
const XmsJVMoptions = ref(["4g", "8g", "12g", "16g"]);
const XmxJVMoptions = ref(["4g", "8g", "12g", "16g", "20g", "24g", "28g"]);
const form = reactive({
  ip: "",
  type: "Linux",
  username: "",
  password: "",
  xms: "",
  xmx: ""
});
const pagination = ref({
  total: 0,
  pageNum: 1,
  pageSize: 10,
})

const getList = async () => {
  try {
    loading.value = true;
    const res = await getMachineInfo({
      ip: searchIp.value,
      pageNum: pagination.value.pageNum,
      pageSize: pagination.value.pageSize
    });
    loading.value = false;
    if (res.success) {
      tableData.value = res.data.list;
      pagination.value.total = res.data.total;
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    loading.value = false;
    ElMessage.error(error);
  }
};

const showDialog = () => {
  form.ip = ""
  form.username = ""
  form.password = ""
  form.xms = ""
  form.xmx = ""
  dialogFormVisible.value = true;
  dialogIsDisabled.value = false;

}

const handleSelectionChange = (val: selection[]) => {
  multipleSelection.value = val;
};

const handleDel = async (row: { ip: any }) => {
  try {
    loading.value = true;
    const res = await deleteTestingMachine({
      ip: row.ip
    });
    loading.value = false;
    if (res.success) {
      getList();
      ElMessage.success("删除成功");
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    loading.value = false;
    ElMessage.error(error);
  }
};

const handleEnable = async row => {
  try {
    loading.value = true;
    const res = await machineIsEnable({
      ip: row.ip
    });
    loading.value = false;
    if (res.success) {
      // getList();
      ElMessage.success("修改成功");
      return true;
    } else {
      ElMessage.error(res.msg);
      return false;
    }
  } catch (error) {
    loading.value = false;
    ElMessage.error(error);
    return false;
  }
};

const handleCheckEnvironment = async row => {
  try {
    loading.value = true;
    const res = await checkEnvironment({
      ip: row.ip,
      password: row.password,
      username: row.username,
      xms: row.xms,
      xmx: row.xmx,
    });
    loading.value = false;
    if (res.success) {
      ElMessage.success(res.msg);
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    loading.value = false;
    ElMessage.error(error);
  }
};

const handleStartJmeter = async row => {
  try {
    loading.value = true;
    const res = await startJmeter({
      ip: row.ip,
      password: row.password,
      username: row.username,
      xms: row.xms,
      xmx: row.xmx,
    });
    loading.value = false;
    if (res.success) {
      ElMessage.success(res.msg);
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    loading.value = false;
    ElMessage.error(error);
  }
};

const handleCheckJmeterIsOpen = async row => {
  try {
    loading.value = true;
    const res = await checkJmeterIsOpen({
      ip: row.ip,
      password: row.password,
      username: row.username,
      xms: row.xms,
      xmx: row.xmx,
    });
    loading.value = false;
    if (res.success) {
      ElMessage.success(res.msg);
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    loading.value = false;
    ElMessage.error(error);
  }
};

const handleTestingConnection = async () => {
  try {
    dialogLoading.value = true;
    const res = await testingConnection({
      ip: form.ip,
      password: form.password,
      username: form.username,
      xms: form.xms,
      xmx: form.xmx,
    });
    dialogLoading.value = false;
    if (res.success) {
      dialogIsDisabled.value = res.data;
      ElMessage.success(res.msg);
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    dialogLoading.value = false;
    ElMessage.error(error);
  }
};

const handleAddTestingMachine = async () => {
  try {
    dialogLoading.value = true;
    const res = await addTestingMachine({
      ip: form.ip,
      password: form.password,
      username: form.username,
      xms: form.xms,
      xmx: form.xmx
    });
    dialogLoading.value = false;
    if (res.success) {
      dialogFormVisible.value = false;
      getList();
      ElMessage.success(res.msg);
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    dialogLoading.value = false;
    ElMessage.error(error);
  }
};

const handleEdit = async row => {
  console.log(row)
  form.ip = row.ip;
  form.username = row.username;
  form.password = row.password;
  form.xms = row.jvmXms;
  form.xmx = row.jvmXmx;
  dialogIsDisabled.value = false;
  dialogFormVisible.value = true;
};

const handleSizeChange = (val: number) => {
  pagination.value.pageSize = val
  getList()
}
const handleCurrentChange = (val: number) => {
  pagination.value.pageNum = val
  getList()
}

onMounted(async () => {
  await getList();
});
</script>

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>负载机管理</span>
      </div>
    </template>
    <div class="action-bar">
      <div class="flex justify-between w-full">
        <el-space>
          <el-input v-model="searchIp" clearable placeholder="请输入ip地址" style="width: 200px;" />
          <el-button type="primary" @click="getList">搜索</el-button>
        </el-space>
        <el-button type="primary" @click="showDialog">新增负载机</el-button>
      </div>
    </div>
    <el-table ref="multipleTableRef" v-loading="loading" :data="tableData" stripe border style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="ip" label="IP地址" />
      <el-table-column prop="centos_type" label="操作系统" />
      <el-table-column prop="status" label="禁用/启用">
        <template #default="scope">
          <el-switch v-model="scope.row.status" :before-change="handleEnable.bind(this, scope.row)" />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="350">
        <template #default="scope">
          <div class="item-action">
            <el-button size="small" type="primary" @click="handleCheckEnvironment(scope.row)">
              初始化
            </el-button>
            <el-button size="small" type="primary" @click="handleStartJmeter(scope.row)">
              启动
            </el-button>
            <el-button size="small" type="primary" @click="handleCheckJmeterIsOpen(scope.row)">
              检查
            </el-button>
            <el-button size="small" type="primary" @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-popconfirm title="你确定要删除此项吗?" width="200" @confirm="handleDel(scope.row)">
              <template #reference>
                <el-button size="small" type="danger"> 删除 </el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-end mt-[10px]">
      <el-pagination background layout="sizes, prev, pager, next, total" :total="pagination.total" :default-page-size="10"
        :current-page="pagination.pageNum" @update:current-page="handleCurrentChange" @size-change="handleSizeChange" />
    </div>
    <el-dialog v-model="dialogFormVisible" title="新增负载机" width="500">
      <el-divider>基本信息</el-divider>
      <el-form :model="form" v-loading="dialogLoading" label-width="80px" label-position="left">
        <el-form-item label="IP地址">
          <el-input v-model="form.ip" autocomplete="off" />
        </el-form-item>
        <el-form-item label="操作系统">
          <el-input v-model="form.type" :disabled="true" />
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" autocomplete="off" type="password" />
        </el-form-item>
        <el-divider>Jmeter JVM</el-divider>
        <el-form-item label="Xms">
          <el-select v-model="form.xms" placeholder="--请选择--" clearable>
            <el-option v-for="item in XmsJVMoptions" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="Xmx">
          <el-select v-model="form.xmx" placeholder="--请选择--" clearable>
            <el-option v-for="item in XmxJVMoptions" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false" :loading="dialogLoading">取消</el-button>
          <el-button type="primary" @click="handleTestingConnection" :loading="dialogLoading">
            测试链接
          </el-button>
          <el-button type="primary" @click="handleAddTestingMachine" :disabled="!dialogIsDisabled"
            :loading="dialogLoading">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-card>
</template>

<style lang="scss" scoped>
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}

.action-bar {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
